<!--页签组件-->
<template>
  <div class="tabBox">
    <a-tabs
      class="atabsBox"
      v-model="activeKey"
      hide-add
      type="editable-card"
      @change="tabCallback"
      @edit="onEdit"
    >
      <a-tab-pane v-for="pane in tabsArr" :key="pane.key" :tab="pane.title">
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { langMixins } from '@/mixins/lang'
export default {
  name: "HeaderTabs",
  data() {
    return {
      activeKey: 0,
      tabsArr: []
    };
  },
  mixins: [langMixins],
  computed: {
    tabs() {
      return this.$store.state.commonData.tabs;
    }
  },
  watch: {
    tabs(val, oldVal) {
      val.forEach((item, index) => {
        this.$set(item, "key", index);
      });
      // this.tabsArr = val;
      this.tabsArr = this.setRouteByLang(val, 'title', 'path')
    },
    $route(to, from) {
      this.tabsArr.map(item => {
        if (to.path === item.path) {
          this.activeKey = item.key;
        }
      });
    },
    lang: {
      handler(val) {
        this.tabsArr = this.setRouteByLang(this.tabsArr, 'title', 'path')
      },
      deep: true
    }
  },
  mounted() {
    // 页面F5刷新后
    let tabStorageData = JSON.parse(sessionStorage.getItem("tabArr"));
    if (tabStorageData.length > 0) {
      this.tabsArr = tabStorageData;
      // 此时watch里面的tabs并未监听到，需要重新赋值一遍
      this.tabsArr.forEach((item, index) => {
        this.$set(item, "key", index);
      });
      this.tabsArr.map(item => {
        let _ = this;
        if (item.title === _.$route.name) {
          _.activeKey = item.key;
          // this.$router.push({
          //   path: item.path,
          // });
        }
      });
      this.tabsArr = this.setRouteByLang(this.tabsArr, 'title', 'path')
      // console.log(this.tabsArr)
    }
  },
  methods: {
    tabCallback(key) {
      this.tabsArr.map(item => {
        if (key === item.key) {
          this.$router.push({
            path: item.path
          });
        }
      });
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    remove(targetKey) {
      // 1.只有一个禁止删除
      if (this.tabsArr.length <= 1) {
        this.$message.warn("最后一个不能删！");
        return false;
      }
      // 2. 获取当前选择值，定义变量
      let activeKeys = this.activeKey;
      let lastIndex;
      // 3.关闭的页面是是第一个页面， lastIndex == -1，且就是targetKey == 0的时候
      this.tabsArr.forEach((item, i) => {
        if (item.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      // 4. 过滤数组，此时数组还未重组，key值还未变化
      const arrs = this.tabsArr.filter(data => data.key !== targetKey);
      // 5. 当关闭的标签和当前打开的标签是一致 的时候，走进判断
      if (arrs.length > 0 && activeKeys === targetKey) {
        if (lastIndex >= 0) {
          // lastIndex >= 0 ---> 关掉的不是第一个
          activeKeys = arrs[lastIndex].key;
        } else {
          activeKeys = arrs[0].key - 1; // lastIndex == -1的时候，关掉的是第一个（此处减一，尚不清楚，应该是上面未重组数组）
        }
      } else {
        if (activeKeys < targetKey) {
          // activeKeys // 打开 < 关闭
        } else {
          activeKeys = activeKeys - 1; // 打开 > 关闭, 减一
        }
      }
      // 6. 给数组赋值，并且提交vuex，赋值给全局选中变量this.activeKey
      this.tabsArr = arrs;
      this.$store.commit("SET_TABS", this.tabsArr); // 赋值
      this.activeKey = activeKeys;
      // 7.调用tab切换事件，做页面跳转，为什么要加setTimeout，尚不清楚，应该也是上面数组未重组的原因
      setTimeout(() => {
        this.tabCallback(this.activeKey);
      }, 10);
    }
  }
};
</script>
<style lang="less" scoped>
.tabBox {
  .atabsBox {
    /deep/ .ant-tabs-bar {
      margin: 0px;
      border-bottom: none;
      .ant-tabs-nav-container {
        height: 32px;
        .ant-tabs-nav-wrap {
          .ant-tabs-nav-scroll {
            .ant-tabs-nav {
              .ant-tabs-tab {
                // border-radius: 0px;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
                height: 32px;
                line-height: 32px;
                margin-right: 10px;
                // background-color: rgba(126, 160, 230, 1);
                // color: #fff;
                border: none;
                .anticon-close {
                  svg {
                    color: #fff;
                  }
                }
              }
              .ant-tabs-tab-active {
                // background-color: #f0f2f5;
                // color: var(--antd-wave-shadow-color);
                // color: #386bd7;
                .anticon-close {
                  svg {
                    color: rgba(0, 0, 0, 0.45);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /deep/.ant-tabs-tab-prev-icon,
  /deep/.ant-tabs-tab-next-icon {
    color: #fff;
  }
  /deep/.ant-tabs-tab-prev-icon-target,
  /deep/ .ant-tabs-tab-next-icon-target {
    font-size: 16px;
  }
}
</style>